<template>
  <a-form
    :model="detail"
    :labelCol="{ span: 5 }"
    label-align="right"
    name="nest-messages"
    @finish="onFinish"
    :validate-messages="validateMessages"
  >
    <!-- :validate-messages="validateMessages" -->
    <a-form-item :name="'userId'" label="员工编号" required>
      <a-input v-model:value="detail.userId" :disabled="!isEdit" />
    </a-form-item>
    <a-form-item :name="'name'" label="司机姓名" required>
      <a-input v-model:value="detail.name" disabled />
    </a-form-item>
    <!-- <a-form-item :name="['agency', 'name']" label="所属机构" required>
    </a-form-item> -->
    <a-form-item :name="['agency', 'name']" label="所属机构" required>
      <a-tree-select
        v-model:value="detail.agency.name"
        :tree-data="treeData"
        placeholder="请选择所属机构"
        show-search
        allow-clear
        tree-default-expand-all
        tree-node-filter-prop="label"
        disabled
      />
    </a-form-item>
    <a-form-item :name="'mobile'" label="电话" required>
      <a-input v-model:value="detail.mobile" disabled />
    </a-form-item>
    <a-form-item :name="truck" label="配置车辆" required>
      <a-select v-model:value="detail.truck" allow-clear placeholder="请选择">
        <a-select-option v-for="(item, index) in truck" :key="index" :value="index">
          {{ item }}
        </a-select-option>
      </a-select>
    </a-form-item>
  </a-form>
  <!-- 表格数据 -->
  <a-table bordered :data-source="dataSource" :columns="columns">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === '车牌号'">
        <div class="editable-cell">
          <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
            <a-input v-model:value="licensePlate" @pressEnter="save(record.key)" />
            <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
          </div>
          <div v-else class="editable-cell-text-wrapper">
            {{ text || ' ' }}
            <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
          </div>
        </div>
      </template>
      <template v-else-if="column.dataIndex === '操作'">
        <a-popconfirm
          v-if="dataSource.length"
          title="Sure to delete?"
          @confirm="onDelete(record.key)"
        >
          <a>删除</a>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
</template>

<script setup>
import { getBusinessHallTreeAPI } from '@/services/businessHall'
import { getDriverByIdAPI } from '@/services/driver'
import { ref, onMounted } from 'vue'
//表格
// 树形机构信息
const treeData = ref([])
const getTreeData = async () => {
  const res = await getBusinessHallTreeAPI()

  // 递归写法处理成组件所需的树形结构
  function mapChildren({ name, id, children }) {
    const item = { label: name, value: id }
    if (children) {
      item.children = children.map(mapChildren)
    }
    return item
  }
  // 保存树形结构数据用于组件展示
  treeData.value = JSON.parse(res.data).map(mapChildren)
}
const detail = ref({
  // 员工编号
  userId: '',
  /** 司机姓名 */
  name: '',
  /** 电话 */
  mobile: '',
  /** 所属机构 */
  agency: { name: '' },
  //   车牌
  truck: '',
})
const props = defineProps({
  /** 车辆id */
  userId: {
    type: String,
    required: true,
  },
})
console.log(props.userId)
// 获取员工基本信息
const getDetail = async () => {
  // 获取回单详情
  const res = await getDriverByIdAPI(props.userId)
  console.log(res)
  // 绑定数据
  detail.value = res.data
}

// 是否处于编辑状态
const isEdit = ref(false)

onMounted(() => {
  getDetail()
  getTreeData()
})
//************表格************************* */
const columns = [
  {
    title: '车牌号',
    dataIndex: 'name',
    width: '30%',
  },
  {
    title: '车辆状态',
    dataIndex: 'age',
  },
  {
    title: '操作',
    dataIndex: 'address',
  },
]
const dataSource = ref([
  {
    key: '0',
    name: '粤A11223',
    age: '可用',
    address: '查看 | 删除',
  },
])
const onDelete = key => {
  dataSource.value = dataSource.value.filter(item => item.key !== key);
};
</script>

<style scoped>
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
